<!DOCTYPE >
<html lang="en">
  <head>
    <title>html2canvas example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        background-color: white;
      }
      header,
      section {
        overflow: hidden;
      }
      ul {
        margin: 0;
        border: 0;
        padding: 0;
      }
      li {
        display: block; /* i.e., suppress marker */
        color: black;
        height: 4em;
        width: 25%;
        margin: 0;
        float: left;
        background-color: green;
        text-align: center;
        line-height: 4em;
      }

      aside {
        width: 20%;
        float: left;
        text-align: center;
      }

      aside a {
        display: block;
        height: 4em;
        color: blue;
      }

      article {
        padding: 2em 0;
        width: 80%;
        float: left;
      }
    </style>
  </head>
  <body>
    <button id="renderPdf">save pdf</button>
    <section id="pdf">
      <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        <li>61</li>
        <li>62</li>
        <li>63</li>
        <li>64</li>
        <li>65</li>
        <li>66</li>
        <li>67</li>
        <li>68</li>
        <li>69</li>
        <li>70</li>
        <li>71</li>
        <li>72</li>
        <li>73</li>
        <li>74</li>
        <li>75</li>
        <li>76</li>
        <li>77</li>
        <li>78</li>
        <li>79</li>
        <li>80</li>
        <li>81</li>
        <li>82</li>
        <li>83</li>
        <li>84</li>
        <li>85</li>
        <li>86</li>
        <li>87</li>
        <li>88</li>
        <li>89</li>
        <li>90</li>
        <li>91</li>
        <li>92</li>
        <li>93</li>
        <li>94</li>
        <li>95</li>
        <li>96</li>
        <li>97</li>
        <li>98</li>
        <li>99</li>
        <li>100</li>
        <li>101</li>
        <li>102</li>
        <li>103</li>
        <li>104</li>
        <li>105</li>
        <li>106</li>
        <li>107</li>
        <li>108</li>
        <li>109</li>
        <li>110</li>
        <li>111</li>
        <li>112</li>
        <li>113</li>
        <li>114</li>
        <li>115</li>
        <li>116</li>
        <li>117</li>
        <li>118</li>
        <li>119</li>
        <li>120</li>
        <li>121</li>
        <li>122</li>
        <li>123</li>
        <li>124</li>
        <li>125</li>
        <li>126</li>
        <li>127</li>
        <li>128</li>
        <li>129</li>
        <li>130</li>
        <li>131</li>
        <li>132</li>
        <li>133</li>
        <li>134</li>
        <li>135</li>
        <li>136</li>
        <li>137</li>
        <li>138</li>
        <li>139</li>
        <li>140</li>
        <li>141</li>
        <li>142</li>
        <li>143</li>
        <li>144</li>
        <li>145</li>
        <li>146</li>
        <li>147</li>
        <li>148</li>
        <li>149</li>
        <li>150</li>
        <li>151</li>
        <li>152</li>
        <li>153</li>
        <li>154</li>
        <li>155</li>
        <li>156</li>
        <li>157</li>
        <li>158</li>
        <li>159</li>
        <li>160</li>
        <li>161</li>
        <li>162</li>
        <li>163</li>
        <li>164</li>
        <li>165</li>
        <li>166</li>
        <li>167</li>
        <li>168</li>
        <li>169</li>
        <li>170</li>
        <li>171</li>
        <li>172</li>
        <li>173</li>
        <li>174</li>
        <li>175</li>
        <li>176</li>
        <li>177</li>
        <li>178</li>
        <li>179</li>
        <li>180</li>
        <li>181</li>
        <li>182</li>
        <li>183</li>
        <li>184</li>
        <li>185</li>
        <li>186</li>
        <li>187</li>
        <li>188</li>
        <li>189</li>
        <li>190</li>
        <li>191</li>
        <li>192</li>
        <li>193</li>
        <li>194</li>
        <li>195</li>
        <li>196</li>
        <li>197</li>
        <li>198</li>
        <li>199</li>
        <li>200</li>
        <li>201</li>
        <li>202</li>
        <li>203</li>
        <li>204</li>
        <li>205</li>
        <li>206</li>
        <li>207</li>
        <li>208</li>
        <li>209</li>
        <li>210</li>
        <li>211</li>
        <li>212</li>
        <li>213</li>
        <li>214</li>
        <li>215</li>
        <li>216</li>
        <li>217</li>
        <li>218</li>
        <li>219</li>
        <li>220</li>
        <li>221</li>
        <li>222</li>
        <li>223</li>
        <li>224</li>
        <li>225</li>
        <li>226</li>
        <li>227</li>
        <li>228</li>
        <li>229</li>
        <li>230</li>
        <li>231</li>
        <li>232</li>
        <li>233</li>
        <li>234</li>
        <li>235</li>
        <li>236</li>
        <li>237</li>
        <li>238</li>
        <li>239</li>
        <li>240</li>
        <li>241</li>
        <li>242</li>
        <li>243</li>
        <li>244</li>
        <li>245</li>
        <li>246</li>
        <li>247</li>
        <li>248</li>
        <li>249</li>
        <li>250</li>
        <li>251</li>
        <li>252</li>
        <li>253</li>
        <li>254</li>
        <li>255</li>
        <li>256</li>
        <li>257</li>
        <li>258</li>
        <li>259</li>
        <li>260</li>
        <li>261</li>
        <li>262</li>
        <li>263</li>
        <li>264</li>
        <li>265</li>
        <li>266</li>
        <li>267</li>
        <li>268</li>
        <li>269</li>
        <li>270</li>
        <li>271</li>
        <li>272</li>
        <li>273</li>
        <li>274</li>
        <li>275</li>
        <li>276</li>
        <li>277</li>
        <li>278</li>
        <li>279</li>
        <li>280</li>
        <li>281</li>
        <li>282</li>
        <li>283</li>
        <li>284</li>
        <li>285</li>
        <li>286</li>
        <li>287</li>
        <li>288</li>
        <li>289</li>
        <li>290</li>
        <li>291</li>
        <li>292</li>
        <li>293</li>
        <li>294</li>
        <li>295</li>
        <li>296</li>
        <li>297</li>
        <li>298</li>
        <li>299</li>
        <li>300</li>
        <li>301</li>
        <li>302</li>
        <li>303</li>
        <li>304</li>
        <li>305</li>
        <li>306</li>
        <li>307</li>
        <li>308</li>
        <li>309</li>
        <li>310</li>
        <li>311</li>
        <li>312</li>
        <li>313</li>
        <li>314</li>
        <li>315</li>
        <li>316</li>
        <li>317</li>
        <li>318</li>
        <li>319</li>
        <li>320</li>
        <li>321</li>
        <li>322</li>
        <li>323</li>
        <li>324</li>
        <li>325</li>
        <li>326</li>
        <li>327</li>
        <li>328</li>
        <li>329</li>
        <li>330</li>
        <li>331</li>
        <li>332</li>
        <li>333</li>
        <li>334</li>
        <li>335</li>
        <li>336</li>
        <li>337</li>
        <li>338</li>
        <li>339</li>
        <li>340</li>
        <li>341</li>
        <li>342</li>
        <li>343</li>
        <li>344</li>
        <li>345</li>
        <li>346</li>
        <li>347</li>
        <li>348</li>
        <li>349</li>
        <li>350</li>
        <li>351</li>
        <li>352</li>
        <li>353</li>
        <li>354</li>
        <li>355</li>
        <li>356</li>
        <li>357</li>
        <li>358</li>
        <li>359</li>
        <li>360</li>
        <li>361</li>
        <li>362</li>
        <li>363</li>
        <li>364</li>
        <li>365</li>
        <li>366</li>
        <li>367</li>
        <li>368</li>
        <li>369</li>
        <li>370</li>
        <li>371</li>
        <li>372</li>
        <li>373</li>
        <li>374</li>
        <li>375</li>
        <li>376</li>
        <li>377</li>
        <li>378</li>
        <li>379</li>
        <li>380</li>
        <li>381</li>
        <li>382</li>
        <li>383</li>
        <li>384</li>
        <li>385</li>
        <li>386</li>
        <li>387</li>
        <li>388</li>
        <li>389</li>
        <li>390</li>
        <li>391</li>
        <li>392</li>
        <li>393</li>
        <li>394</li>
        <li>395</li>
        <li>396</li>
        <li>397</li>
        <li>398</li>
        <li>399</li>
        <li>400</li>
        <li>401</li>
        <li>402</li>
        <li>403</li>
        <li>404</li>
        <li>405</li>
        <li>406</li>
        <li>407</li>
        <li>408</li>
        <li>409</li>
        <li>410</li>
        <li>411</li>
        <li>412</li>
        <li>413</li>
        <li>414</li>
        <li>415</li>
        <li>416</li>
        <li>417</li>
        <li>418</li>
        <li>419</li>
        <li>420</li>
        <li>421</li>
        <li>422</li>
        <li>423</li>
        <li>424</li>
        <li>425</li>
        <li>426</li>
        <li>427</li>
        <li>428</li>
        <li>429</li>
        <li>430</li>
        <li>431</li>
        <li>432</li>
        <li>433</li>
        <li>434</li>
        <li>435</li>
        <li>436</li>
        <li>437</li>
        <li>438</li>
        <li>439</li>
        <li>440</li>
        <li>441</li>
        <li>442</li>
        <li>443</li>
        <li>444</li>
        <li>445</li>
        <li>446</li>
        <li>447</li>
        <li>448</li>
        <li>449</li>
        <li>450</li>
        <li>451</li>
        <li>452</li>
        <li>453</li>
        <li>454</li>
        <li>455</li>
        <li>456</li>
        <li>457</li>
        <li>458</li>
        <li>459</li>
        <li>460</li>
        <li>461</li>
        <li>462</li>
        <li>463</li>
        <li>464</li>
        <li>465</li>
        <li>466</li>
        <li>467</li>
        <li>468</li>
        <li>469</li>
        <li>470</li>
        <li>471</li>
        <li>472</li>
        <li>473</li>
        <li>474</li>
        <li>475</li>
        <li>476</li>
        <li>477</li>
        <li>478</li>
        <li>479</li>
        <li>480</li>
        <li>481</li>
        <li>482</li>
        <li>483</li>
        <li>484</li>
        <li>485</li>
        <li>486</li>
        <li>487</li>
        <li>488</li>
        <li>489</li>
        <li>490</li>
        <li>491</li>
        <li>492</li>
        <li>493</li>
        <li>494</li>
        <li>495</li>
        <li>496</li>
        <li>497</li>
        <li>498</li>
        <li>499</li>
        <li>500</li>
        <li>501</li>
        <li>502</li>
        <li>503</li>
        <li>504</li>
        <li>505</li>
        <li>506</li>
        <li>507</li>
        <li>508</li>
        <li>509</li>
        <li>510</li>
        <li>511</li>
        <li>512</li>
        <li>513</li>
        <li>514</li>
        <li>515</li>
        <li>516</li>
        <li>517</li>
        <li>518</li>
        <li>519</li>
        <li>520</li>
        <li>521</li>
        <li>522</li>
        <li>523</li>
        <li>524</li>
        <li>525</li>
        <li>526</li>
        <li>527</li>
        <li>528</li>
        <li>529</li>
        <li>530</li>
        <li>531</li>
        <li>532</li>
        <li>533</li>
        <li>534</li>
        <li>535</li>
        <li>536</li>
        <li>537</li>
        <li>538</li>
        <li>539</li>
        <li>540</li>
        <li>541</li>
        <li>542</li>
        <li>543</li>
        <li>544</li>
        <li>545</li>
        <li>546</li>
        <li>547</li>
        <li>548</li>
        <li>549</li>
        <li>550</li>
        <li>551</li>
        <li>552</li>
        <li>553</li>
        <li>554</li>
        <li>555</li>
        <li>556</li>
        <li>557</li>
        <li>558</li>
        <li>559</li>
        <li>560</li>
        <li>561</li>
        <li>562</li>
        <li>563</li>
        <li>564</li>
        <li>565</li>
        <li>566</li>
        <li>567</li>
        <li>568</li>
        <li>569</li>
        <li>570</li>
        <li>571</li>
        <li>572</li>
        <li>573</li>
        <li>574</li>
        <li>575</li>
        <li>576</li>
        <li>577</li>
        <li>578</li>
        <li>579</li>
        <li>580</li>
        <li>581</li>
        <li>582</li>
        <li>583</li>
        <li>584</li>
        <li>585</li>
        <li>586</li>
        <li>587</li>
        <li>588</li>
        <li>589</li>
        <li>590</li>
        <li>591</li>
        <li>592</li>
        <li>593</li>
        <li>594</li>
        <li>595</li>
        <li>596</li>
        <li>597</li>
        <li>598</li>
        <li>599</li>
        <li>600</li>
        <li>601</li>
        <li>602</li>
        <li>603</li>
        <li>604</li>
        <li>605</li>
        <li>606</li>
        <li>607</li>
        <li>608</li>
        <li>609</li>
        <li>610</li>
        <li>611</li>
        <li>612</li>
        <li>613</li>
        <li>614</li>
        <li>615</li>
        <li>616</li>
        <li>617</li>
        <li>618</li>
        <li>619</li>
        <li>620</li>
        <li>621</li>
        <li>622</li>
        <li>623</li>
        <li>624</li>
        <li>625</li>
        <li>626</li>
        <li>627</li>
        <li>628</li>
        <li>629</li>
        <li>630</li>
        <li>631</li>
        <li>632</li>
        <li>633</li>
        <li>634</li>
        <li>635</li>
        <li>636</li>
        <li>637</li>
        <li>638</li>
        <li>639</li>
        <li>640</li>
        <li>641</li>
        <li>642</li>
        <li>643</li>
        <li>644</li>
        <li>645</li>
        <li>646</li>
        <li>647</li>
        <li>648</li>
        <li>649</li>
        <li>650</li>
        <li>651</li>
        <li>652</li>
        <li>653</li>
        <li>654</li>
        <li>655</li>
        <li>656</li>
        <li>657</li>
        <li>658</li>
        <li>659</li>
        <li>660</li>
        <li>661</li>
        <li>662</li>
        <li>663</li>
        <li>664</li>
        <li>665</li>
        <li>666</li>
        <li>667</li>
        <li>668</li>
        <li>669</li>
        <li>670</li>
        <li>671</li>
        <li>672</li>
        <li>673</li>
        <li>674</li>
        <li>675</li>
        <li>676</li>
        <li>677</li>
        <li>678</li>
        <li>679</li>
        <li>680</li>
        <li>681</li>
        <li>682</li>
        <li>683</li>
        <li>684</li>
        <li>685</li>
        <li>686</li>
        <li>687</li>
        <li>688</li>
        <li>689</li>
        <li>690</li>
        <li>691</li>
        <li>692</li>
        <li>693</li>
        <li>694</li>
        <li>695</li>
        <li>696</li>
        <li>697</li>
        <li>698</li>
        <li>699</li>
        <li>700</li>
        <li>701</li>
        <li>702</li>
        <li>703</li>
        <li>704</li>
        <li>705</li>
        <li>706</li>
        <li>707</li>
        <li>708</li>
        <li>709</li>
        <li>710</li>
        <li>711</li>
        <li>712</li>
        <li>713</li>
        <li>714</li>
        <li>715</li>
        <li>716</li>
        <li>717</li>
        <li>718</li>
        <li>719</li>
        <li>720</li>
        <li>721</li>
        <li>722</li>
        <li>723</li>
        <li>724</li>
        <li>725</li>
        <li>726</li>
        <li>727</li>
        <li>728</li>
        <li>729</li>
        <li>730</li>
        <li>731</li>
        <li>732</li>
        <li>733</li>
        <li>734</li>
        <li>735</li>
        <li>736</li>
        <li>737</li>
        <li>738</li>
        <li>739</li>
        <li>740</li>
        <li>741</li>
        <li>742</li>
        <li>743</li>
        <li>744</li>
        <li>745</li>
        <li>746</li>
        <li>747</li>
        <li>748</li>
        <li>749</li>
        <li>750</li>
        <li>751</li>
        <li>752</li>
        <li>753</li>
        <li>754</li>
        <li>755</li>
        <li>756</li>
        <li>757</li>
        <li>758</li>
        <li>759</li>
        <li>760</li>
        <li>761</li>
        <li>762</li>
        <li>763</li>
        <li>764</li>
        <li>765</li>
        <li>766</li>
        <li>767</li>
        <li>768</li>
        <li>769</li>
        <li>770</li>
        <li>771</li>
        <li>772</li>
        <li>773</li>
        <li>774</li>
        <li>775</li>
        <li>776</li>
        <li>777</li>
        <li>778</li>
        <li>779</li>
        <li>780</li>
        <li>781</li>
        <li>782</li>
        <li>783</li>
        <li>784</li>
        <li>785</li>
        <li>786</li>
        <li>787</li>
        <li>788</li>
        <li>789</li>
        <li>790</li>
        <li>791</li>
        <li>792</li>
        <li>793</li>
        <li>794</li>
        <li>795</li>
        <li>796</li>
        <li>797</li>
        <li>798</li>
        <li>799</li>
        <li>800</li>
        <li>801</li>
        <li>802</li>
        <li>803</li>
        <li>804</li>
        <li>805</li>
        <li>806</li>
        <li>807</li>
        <li>808</li>
        <li>809</li>
        <li>810</li>
        <li>811</li>
        <li>812</li>
        <li>813</li>
        <li>814</li>
        <li>815</li>
        <li>816</li>
        <li>817</li>
        <li>818</li>
        <li>819</li>
        <li>820</li>
        <li>821</li>
        <li>822</li>
        <li>823</li>
        <li>824</li>
        <li>825</li>
        <li>826</li>
        <li>827</li>
        <li>828</li>
        <li>829</li>
        <li>830</li>
        <li>831</li>
        <li>832</li>
        <li>833</li>
        <li>834</li>
        <li>835</li>
        <li>836</li>
        <li>837</li>
        <li>838</li>
        <li>839</li>
        <li>840</li>
        <li>841</li>
        <li>842</li>
        <li>843</li>
        <li>844</li>
        <li>845</li>
        <li>846</li>
        <li>847</li>
        <li>848</li>
        <li>849</li>
        <li>850</li>
        <li>851</li>
        <li>852</li>
        <li>853</li>
        <li>854</li>
        <li>855</li>
        <li>856</li>
        <li>857</li>
        <li>858</li>
        <li>859</li>
        <li>860</li>
        <li>861</li>
        <li>862</li>
        <li>863</li>
        <li>864</li>
        <li>865</li>
        <li>866</li>
        <li>867</li>
        <li>868</li>
        <li>869</li>
        <li>870</li>
        <li>871</li>
        <li>872</li>
        <li>873</li>
        <li>874</li>
        <li>875</li>
        <li>876</li>
        <li>877</li>
        <li>878</li>
        <li>879</li>
        <li>880</li>
        <li>881</li>
        <li>882</li>
        <li>883</li>
        <li>884</li>
        <li>885</li>
        <li>886</li>
        <li>887</li>
        <li>888</li>
        <li>889</li>
        <li>890</li>
        <li>891</li>
        <li>892</li>
        <li>893</li>
        <li>894</li>
        <li>895</li>
        <li>896</li>
        <li>897</li>
        <li>898</li>
        <li>899</li>
        <li>900</li>
        <li>901</li>
        <li>902</li>
        <li>903</li>
        <li>904</li>
        <li>905</li>
        <li>906</li>
        <li>907</li>
        <li>908</li>
        <li>909</li>
        <li>910</li>
        <li>911</li>
        <li>912</li>
        <li>913</li>
        <li>914</li>
        <li>915</li>
        <li>916</li>
        <li>917</li>
        <li>918</li>
        <li>919</li>
        <li>920</li>
        <li>921</li>
        <li>922</li>
        <li>923</li>
        <li>924</li>
        <li>925</li>
        <li>926</li>
        <li>927</li>
        <li>928</li>
        <li>929</li>
        <li>930</li>
        <li>931</li>
        <li>932</li>
        <li>933</li>
        <li>934</li>
        <li>935</li>
        <li>936</li>
        <li>937</li>
        <li>938</li>
        <li>939</li>
        <li>940</li>
        <li>941</li>
        <li>942</li>
        <li>943</li>
        <li>944</li>
        <li>945</li>
        <li>946</li>
        <li>947</li>
        <li>948</li>
        <li>949</li>
        <li>950</li>
        <li>951</li>
        <li>952</li>
        <li>953</li>
        <li>954</li>
        <li>955</li>
        <li>956</li>
        <li>957</li>
        <li>958</li>
        <li>959</li>
        <li>960</li>
        <li>961</li>
        <li>962</li>
        <li>963</li>
        <li>964</li>
        <li>965</li>
        <li>966</li>
        <li>967</li>
        <li>968</li>
        <li>969</li>
        <li>970</li>
        <li>971</li>
        <li>972</li>
        <li>973</li>
        <li>974</li>
        <li>975</li>
        <li>976</li>
        <li>977</li>
        <li>978</li>
        <li>979</li>
        <li>980</li>
        <li>981</li>
        <li>982</li>
        <li>983</li>
        <li>984</li>
        <li>985</li>
        <li>986</li>
        <li>987</li>
        <li>988</li>
        <li>989</li>
        <li>990</li>
        <li>991</li>
        <li>992</li>
        <li>993</li>
        <li>994</li>
        <li>995</li>
        <li>996</li>
        <li>997</li>
        <li>998</li>
        <li>999</li>
        <li>1000</li>
      </ul>
    </section>
    <footer>this is footer page.</footer>
    <script
      type="text/javascript"
      src="https://html2canvas.hertzen.com/dist/html2canvas.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"
    ></script>
    <script type="text/javascript">
      var downPdf = document.getElementById("renderPdf");

      downPdf.onclick = function () {
        html2canvas(document.getElementById("pdf")).then(function (canvas) {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;

          var imgWidth = 595.28;
          var imgHeight = (592.28 / contentWidth) * contentHeight;
          var pageData = canvas.toDataURL("image/jpeg", 1.0);

          var pdf = new jspdf.jsPDF("", "pt", [imgWidth, imgHeight]);
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);


          pdf.save("content.pdf");
        });
      };
    </script>
  </body>
</html>
